<!--
 * @Description: file content
 * @Author: Wenmin He
 * @Date: 2021-07-02 17:25:17
 * @LastEditors: luojie
 * @LastEditTime: 2021-08-04 19:18:23
-->
<template>
  <view class="rooms">
    <view class="header">
      <h2 class="title">
        您选择的是 <span class="room-number"> {{ roomNum }} </span>号房
      </h2>
    </view>
    <scroll-view scroll-y="true" class="list-wrapper">
      <view   class="user-list">
        <view class="record" v-for="(item, index) in personList" :key="item.name">
          <view class="no">{{ index + 1 }}</view>
          <view class="record-img">
            <view class="record-name">{{ item.name }}</view>

            <!-- <view class="record-idcard">卡号： {{item.cardId}}</view> -->
          </view>
          <view class="status checked-in">已入住</view>
        </view>
        <view
          class="record"
          v-for="(item, index) in addPersonList"
          :key="item.name"
        >
          <view class="no">{{ index + personList.length + 1 }}</view>
          <view class="record-img">
            <view class="record-name">{{ item.name }}</view>
            <!-- <view class="status not-checked-in">未入住</view> -->

            <!-- <view class="record-idcard">卡号： {{item.cardId}}</view> -->
          </view>
          <view class="delete-btn" @click="delItem(index)">删除</view>
        </view>
      </view>
    </scroll-view>

    <view class="footer">
      <button class="cancle" @click="goBack" v-if="addPersonList.length == 0">
        返回
      </button>
      <button class="cancle" @click="comfirm" v-else>提交</button>
      <button class="dialogOk" @click="addPerson">扫一扫</button>
    </view>
  </view>
</template>

<script>
import { scanCode } from "@/utils";
import { houseInfo, checkInList } from "@/api";
import delSlideLeft from "@/components/ay-operate/del_slideLeft.vue";

export default {
  data() {
    return {
      houseId: "",
      roomNum: "",
      personList: [],
      addPersonList: [],
      personType:'',
      quarantineDay:14,
    };
  },
  methods: {
    addPerson() {
      scanCode({
        fn:(data)=>{
          let personState = data.targetUser.personInfo.personState;
          let name = data.targetUser.name;
          if(personState == 21 || personState == 22){
            uni.showToast({
                title: `${name}已入住，请勿重新办理！`,
                icon: 'none',
                duration: 3000
              });
              return
          }
          let obj = {
            houseId: this.houseId,
            moveDay: this.quarantineDay,
            personClassify:this.personType.value,
            phone: data.targetUser.phone,
            ...data.params,
          };
          if (this.addPersonList.find((item) => item.cardId === obj.cardId)) {
            uni.showToast({
              title: `重复扫码`,
              duration: 3000,
              icon: "none",
            });
          } else {
            this.addPersonList.push(obj);
          }
        }
      })
    },
    delItem(index) {
      let that = this;
      that.addPersonList.splice(index, 1);
    },
    comfirm() {
      console.log("this.personList", this.addPersonList);
      uni.showLoading({
        title: '加载中',
        mask: true
      });
      checkInList(this.addPersonList).then((rs) => {
        uni.hideLoading();
        uni.navigateTo({
          url: `../checkIn/suceess`,
        });
      });
    },
    goBack() {
      uni.navigateBack();
    },
  },
  onLoad(options) {
    this.houseId = options.houseId;
    this.roomNum = options.roomNum;
    this.personType =JSON.parse(options.personType);
    this.quarantineDay =options.quarantineDay;
    uni.setNavigationBarTitle({ title: "添加住户" });
    // uni.setNavigationBarTitle({ title: `${options.roomNum}房`});
    console.log(options,999);
    houseInfo(this.houseId).then((rs) => {
      console.log('根据房间编码查询住房人员rs', rs)
      this.personList = rs;
      if (rs.length == 0) {
        this.addPerson();
      }
    });
  },
  components: {
    delSlideLeft,
  },
};
</script>

<style scoped lang="scss">
.rooms {
  // padding-bottom: 80rpx;
  font-size: 40rpx;
  background-color: #f9f9f9;
  .header {
    padding: 32rpx;
    margin-bottom: 10rpx;
    background-color: #fff;
    h2 {
      color: #333333;
    }
    span {
      color: #2c9af1;
    }
  }
}
.slider {
  width: 100%;
  .record-img {
    width: 100%;
    height: 100%;
  }
}
.list-wrapper{
  height: calc(100vh - 164px);
}
.user-list {
  padding: 0 32rpx;
  padding-bottom: 16px;
  .no {
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    border-radius: 50%;
    margin-right: 32rpx;
    color: #fff;
    font-size: 30rpx;
    background-color: #2c9af1;
  }
  .status {
    margin-top: 10rpx;
    width: 122rpx;
    line-height: 59rpx;
    height: 59rpx;

    opacity: 1;
    border-radius: 5rpx;
    font-size: 30rpx;
    text-align: center;
  }
  .checked-in {
    color: #f15b53;
    border: 1rpx solid #f15b53;
  }

  .not-checked-in {
    color: #66dd55;
    border: 1rpx solid #66dd55;
  }
  .delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 35rpx;
    color: #fff;
    background-color: #f15b53;
  }
}

.record {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
  padding: 32rpx 20rpx;
  border-radius: 10rpx;
  box-shadow: 0px 8px 20px #e5e5e5;
  margin-top: 30rpx;

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &-img {
    flex: 1;
  }
  &-name {
    display: inline-block;
    vertical-align: middle;
    color: #000;
    font-size: 36rpx;
    font-weight: 600;
  }
  &-idcard {
    font-size: 28rpx;
  }
  &-time {
    font-size: 26rpx;
    color: #999;
  }
  .del-btn {
    width: 34rpx;
    height: 31rpx;
    background: url(https://szgd-dev.tgovcloud.com/public/images/icon-del.png) no-repeat;
    background-size: 100% 100%;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  justify-content: space-between;
  padding: 58rpx 32rpx;
  // border: 1rpx solid #cccccc;
  background: #fff;
  .cancle {
    width: 328rpx;
    color: #000000;
    font-size: 34rpx;
    background: #fff;
    border: 1rpx solid #cccccc;
    border-radius: 16rpx;
    margin-right: 30rpx;
  }
  .dialogOk {
    width: 328rpx;
    color: #fff;
    font-size: 34rpx;
    background: #2c9af1;
    border-radius: 16rpx;
  }
}
</style>
